<template>
	<view class="content flex-column flex-between ">
		<view class="tab-box">
			<m-tab :list="tabList" v-model="tabIdx" wh="24"></m-tab>
		</view>
		<view id="k-line-chart" class="k-line-chart" :klineData="klineData" :oneData="oneData" :historyArr="historyArr"
			:tabIdx="tabIdx" :kinleType="kinleType" :change:kinleType="klinecharts.swKinleType"
			:change:historyArr="klinecharts.updateHistory" :change:klineData="klinecharts.loadData"
			:change:oneData="klinecharts.updateData">
		</view>
		<view class="tab-box">
			<m-tab :list="['VOL','MACD','RSI','BOLL']" v-model="kinleType" wh="24"></m-tab>
		</view>
	</view>
</template>

<script>
	import { mapState, mapMutations } from "vuex"
	import { publish, getKlinedata, getKlinedataTime, orderSellPage, DealOrder } from '@/api/deal.js'
	import { init } from 'klinecharts'
	import { array } from '@/libs/fn/verify.js'
	export default {
		data() {
			return {
				isLoading: false, //加载状态
				tabIdx: '1d',
				kinleType: 0, //幅图类型
				tabList: {
					'1m': '1分钟', //180条
					'10m': '10分钟', //144条
					'30m': '30分钟', //100
					'1h': '1小时',
					'1d': '1天',
					'1w': '1周',
				},
				oneData: [], //单条数据更新
				klineData: [], //首屏数据
				historyArr: [], //历史数据
				timestamp: Date.now(),
				timeOb: null,
			};
		},
		props: {
			instid: {
				type: [String, Number],
				default: ''
			},
		},
		watch: {
			tabIdx() {
				console.log('tabIdx')
				this.klineInit()
			},
			instid() {
				console.log('instid')
				this.klineInit()
			}
		},
		mounted() {

		},
		methods: {
			clearTime() {
				clearTimeout(this.timeOb);
			},
			async getOneData() {
				const { list } = await getKlinedata({
					pageSize: 1,
					timestamp: Date.now(),
					instid: this.instid,
					type: this.tabIdx,
				})
				this.oneData = list[0]
			},
			//请求历史数据
			async loadHistory(e = '') {
				await this.sleep(100)
				if (!e || array(e)) return
				const { list } = await getKlinedataTime({
					pageSize: 50,
					timestamp: e,
					instid: this.instid,
					type: this.tabIdx
				})
				if (list.length <= 0) return

				this.historyArr = list
			},
			klineInit() {
				if (this.isLoading == true) return
				clearTimeout(this.timeOb);
				this.timeOb = setInterval(() => {
					this.getOneData()
				}, 3000);
				this.klineData = [];
				this.getKlinedata();
			},
			async getKlinedata() {
				this.isLoading = true;
				const { list } = await getKlinedata({
					pageSize: 50,
					timestamp: this.timestamp,
					instid: this.instid,
					type: this.tabIdx
				})
				this.isLoading = false;
				this.klineData = list;
			},
		},
	};
</script>


<script module="klinecharts" lang="renderjs">
	import { init } from 'klinecharts'
	export default {
		data() {
			return {
				chart: null,
			};

		},
		mounted() {
			this.init();
		},
		methods: {
			init() {

				this.chart = init('k-line-chart', {
					candle: {
						tooltip: {
							labels: ['开', '收', '高', '低'],
							defaultValue: '--',
							values: (kLineData)=> {
								return [
									kLineData.open.toFixed(2),
									kLineData.close.toFixed(2),
									kLineData.high.toFixed(2),
									kLineData.low.toFixed(2),
								]
							}
						},
					},
					technicalIndicator: {
						tooltip: {
							showName: false,
							showParams: false
						}
					},
					yAxis: {
						inside: true,
						axisLine: {
							show: false
						}
					}
				})
				this.chart.overrideTechnicalIndicator({ name: 'MA', calcParams: [5, 10, 30] })
				this.chart.setDataSpace(10)
				this.chart.createTechnicalIndicator('MA', false, { id: 'candle_pane' })
				this.chart.createTechnicalIndicator('VOL', false, { id: 'VOL', height: 120, dragEnabled: false })
				this.chart.loadMore(this.emitMore)
			},
			//切换指标
			swKinleType() {
				if (!this.chart) return;
				switch (this.kinleType) {
					case 0:
						this.chart.createTechnicalIndicator('VOL', false, { id: 'VOL', height: 120, dragEnabled: false })
						this.chart.removeTechnicalIndicator('MACD')
						this.chart.removeTechnicalIndicator('RSI')
						this.chart.removeTechnicalIndicator('BOLL')
						break;
					case 1:
						this.chart.createTechnicalIndicator('MACD', false, { id: 'MACD', height: 120, dragEnabled: false })
						this.chart.removeTechnicalIndicator('VOL')
						this.chart.removeTechnicalIndicator('RSI')
						this.chart.removeTechnicalIndicator('BOLL')
						break;
					case 2:
						this.chart.createTechnicalIndicator('RSI', false, { id: 'RSI', height: 120, dragEnabled: false })
						this.chart.removeTechnicalIndicator('VOL')
						this.chart.removeTechnicalIndicator('MACD')
						this.chart.removeTechnicalIndicator('BOLL')
						break;
					case 3:
						this.chart.createTechnicalIndicator('BOLL', false, { id: 'BOLL', height: 120, dragEnabled: false })
						this.chart.removeTechnicalIndicator('VOL')
						this.chart.removeTechnicalIndicator('RSI')
						this.chart.removeTechnicalIndicator('MACD')
						break;
					default:
						break;
				}
			},
			//加载更多数据
			updateHistory() {
				if (this.historyArr.length <= 0) return
				// console.log('历史数据', this.historyArr)
				this.chart.applyMoreData(this.historyArr)
			},
			//向上传递信息
			emitMore(e) {
				if (!e) return
				this.$ownerInstance.callMethod('loadHistory', e)
			},
			//切换分时的时候  清空K线
			clearData(newValue, oldValue, ownerInstance, instance) {
				if (!oldValue) return
				// 添加最新数据 
				this.chart.clearData();
			},
			//单条更新
			updateData(newValue, oldValue, ownerInstance, instance) {
				if (newValue.length <= 0) return
				// 添加最新数据 
				this.chart.updateData(newValue)
			},
			//
			loadData(newValue, oldValue, ownerInstance, instance) {
				if (newValue.length <= 0) return
				// 添加历史数据 
				this.chart.applyNewData(newValue, true)
			}
		}
	}
</script>

<style lang="scss">
	.tab-box {
		width: 100%;
		background: #fff;
		margin-bottom: 10rpx;

		/deep/ .m-tab {
			.tab-item {
				text-align: center !important;
			}
		}
	}

	.k-line-chart {
		background: #fff;
		width: 100%;
		height: 100%;
	}

	.content {
		height: 100%;

	}
</style>